<template>
    <div>
        <Breadcrumb></Breadcrumb>
        <el-table :data="rows" border style="width: 100%" stripe fit>
            <el-table-column prop="_id" label="编号"  align="center"></el-table-column>
            <el-table-column prop="name" label="套餐名称" width="150px" align="center"></el-table-column>
             <el-table-column prop="mouth" label="套餐月数" width="150px" align="center"></el-table-column>
            <el-table-column prop="normalPrice" label="正常价" width="150px" align="center"></el-table-column>
            <el-table-column prop="salePrice" label="促销价" width="150px" align="center"></el-table-column>
            <el-table-column prop="type" label="是否推荐" width="150px" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">
                        <i class="el-icon-check"></i>
                    </span>
                    <span v-else>
                        <i class="el-icon-close"></i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                    <el-button size="mini" @click="toUpdateData(scope.row._id)" style="margin-right: 10px">修改</el-button>
                    <el-popconfirm
                        placement="top"
                        confirm-button-text='好的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        icon-color="red"
                        title="确认删除该会员吗"
                        @confirm="deleteOne(scope.row._id)"
                        >
                        <el-button size="mini" type="danger" slot="reference">删除</el-button>
                        <input type="text">
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 7, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination> -->
        
    </div>
</template>

<script>
import Breadcrumb from '../../views/nav/Breadcrumb.vue'
import mixinsList from "../../mixins/mixinsList.js";
export default {
    data() {
        return {
            date:'',
        }
    },
    components: {
        Breadcrumb
    },
    mixins: [mixinsList("meals")],
    methods: {
        toUpdateData(_id) {
            this.$router.push("/updateMeal/" + _id);
        }
    },
};
</script>

<style scoped>
.el-table {
    border-radius: 10px;
    margin-bottom: 20px;
}
.el-table-column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.el-breadcrumb {
    padding-bottom: 20px;
    border-bottom: 1px solid #999;
    margin-bottom: 20px;
}
.el-input {
    width: 200px;
    margin-right: 10px;
}
.el-select {
    width: 150px;
    margin-right: 10px;
}
.el-form {
    width: 500px;
}
</style>